{% extends "base.html" %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h3 class="card-title">添加新员工</h3>
    </div>
    <div class="card-body">
        <form method="POST" enctype="multipart/form-data">
            <div class="row">
                <div class="col-md-6">
                    <h5 class="mb-3">基本信息</h5>
                    <div class="mb-3">
                        <label for="name" class="form-label">姓名</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="department" class="form-label">部门</label>
                        <input type="text" class="form-control" id="department" name="department" required>
                    </div>
                    <div class="mb-3">
                        <label for="position" class="form-label">职位</label>
                        <input type="text" class="form-control" id="position" name="position" required>
                    </div>
                    <div class="mb-3">
                        <label for="phone" class="form-label">手机号</label>
                        <input type="tel" class="form-control" id="phone" name="phone" required>
                    </div>
                    <div class="mb-3">
                        <label for="id_card" class="form-label">身份证号</label>
                        <input type="text" class="form-control" id="id_card" name="id_card" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <h5 class="mb-3">证件信息</h5>
                    <div class="mb-3">
                        <label for="id_card_front" class="form-label">身份证正面</label>
                        <input type="file" class="form-control" id="id_card_front" name="id_card_front" accept="image/*">
                    </div>
                    <div class="mb-3">
                        <label for="id_card_back" class="form-label">身份证反面</label>
                        <input type="file" class="form-control" id="id_card_back" name="id_card_back" accept="image/*">
                    </div>
                    <div class="mb-3">
                        <label for="diploma" class="form-label">学历证书</label>
                        <input type="file" class="form-control" id="diploma" name="diploma" accept="image/*,.pdf">
                    </div>
                    <div class="mb-3">
                        <label for="degree" class="form-label">学位证书</label>
                        <input type="file" class="form-control" id="degree" name="degree" accept="image/*,.pdf">
                    </div>
                </div>
            </div>

            <!-- 添加其他证书部分 -->
            <div class="row mt-4">
                <div class="col-12">
                    <h5 class="mb-3">其他证书</h5>
                    <div id="other-certificates">
                        <!-- 证书条目将在这里动态添加 -->
                    </div>
                    <button type="button" class="btn btn-secondary" id="add-certificate">添加证书</button>
                </div>
            </div>

            <div class="mt-4">
                <button type="submit" class="btn btn-primary">保存</button>
                <a href="{{ url_for('employee.index') }}" class="btn btn-secondary">返回</a>
            </div>
        </form>
    </div>
</div>

<!-- 添加证书模板 -->
<template id="certificate-template">
    <div class="certificate-entry border rounded p-3 mb-3">
        <div class="mb-3">
            <label class="form-label">证书名称</label>
            <input type="text" class="form-control" name="cert_name" required>
        </div>
        <div class="mb-3">
            <label class="form-label">证书文件</label>
            <input type="file" class="form-control" name="cert_file" accept="image/*,.pdf">
        </div>
        <button type="button" class="btn btn-danger btn-sm remove-certificate">删除证书</button>
    </div>
</template>

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const certificatesContainer = document.getElementById('other-certificates');
    const addButton = document.getElementById('add-certificate');
    const template = document.getElementById('certificate-template');

    // 添加证书
    addButton.addEventListener('click', function() {
        const newCertificate = template.content.cloneNode(true);
        certificatesContainer.appendChild(newCertificate);
        
        // 更新所有删除按钮的事件监听
        updateRemoveButtons();
    });

    // 更新删除按钮事件监听
    function updateRemoveButtons() {
        document.querySelectorAll('.remove-certificate').forEach(button => {
            button.onclick = function() {
                this.closest('.certificate-entry').remove();
            };
        });
    }

    // 初始化现有证书的删除按钮
    updateRemoveButtons();

    // 添加文件预览功能
    document.addEventListener('change', function(e) {
        if (e.target && e.target.type === 'file') {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const preview = document.createElement('img');
                    preview.src = e.target.result;
                    preview.style.maxHeight = '200px';
                    preview.style.marginTop = '10px';
                    
                    // 移除旧的预览图
                    const oldPreview = e.target.parentElement.querySelector('img');
                    if (oldPreview) {
                        oldPreview.remove();
                    }
                    
                    e.target.parentElement.appendChild(preview);
                };
                reader.readAsDataURL(file);
            }
        }
    });
});
</script>
{% endblock %}
{% endblock %} 